<template>
	<div>
		<h2 style="color: orange;">个人中心</h2>
		<el-form label-width="80px" style="width: 400px;">
			<el-form-item label="头像">
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item label="昵称">
				<el-input v-model="user.nickname"></el-input>
			</el-form-item>
			<el-form-item label="用户名">
				 <el-input v-model="user.username"></el-input>
			</el-form-item>
			<el-form-item label="">
				 <el-button type="primary">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	 export default {
	    data() {
	      return {
	        dialogImageUrl: '',
	        dialogVisible: false,
			user: localStorage.user ? JSON.parse(localStorage.user) :  null  //JSON.parse() 将json字符串转成js对象
	      };
	    },
	    methods: {
			//移除图片时触发的函数
	      handleRemove(file, fileList) {
	        console.log(file, fileList);
	      },
		  // 预览图片 点击放大镜时
	      handlePictureCardPreview(file) {
	        this.dialogImageUrl = file.url;
	        this.dialogVisible = true;
	      }
	    }
	  }
</script>

<style>
</style>